<template>
  <div class="animate__animated animate__fadeInLeft">
    <!-- Display course information -->
    <div class="container">
      <div v-if="teacher && Object.keys(teacher).length" class="course-details">
        <img :src="teacher.teacherAvatar" alt="Course Cover Image" class="cover-image">
        <div class="course-info">
          <h2>讲师姓名:{{ teacher.teacherName }}</h2>
          <p>讲师简介:{{ teacher.teacherDescription }}</p>
          <p>讲师邮箱:{{ teacher.teacherEmail }}</p>
          <p>讲师生日:{{ teacher.birthday }}</p>
          <p>讲师等级:{{ teacher.teacherLevelName }}</p>
        </div>
        <div class="teacher-type">{{ teacher.teacherTypeName }}</div>
      </div>
    </div>
    <h1 style="margin-left: 200px">讲师课程</h1>
    <div class="course-container ">

      <div class="course-list">


        <div class="course-card" v-for="course in courseList" :key="course.id" @click="openDetailPage(course.id)">
          <h3 class="course-name">{{ course.courseName }}</h3> <!-- 将课程名称添加在最左侧 -->
          <div class="course-info">
            <img :src="course.courseHover" alt="Course Cover" class="course-cover">
            <hr/>
            <span class="courseTypeName">{{ course.courseTypeName }}</span> <!-- 将课程价格添加在最右侧 -->

          </div>
        </div>

        <div v-if="code===400" class="course-empty">
          <div>
            <img src="@/assets/images/course.png" alt="">
          </div>
          <h1>讲师还没发布对应的课程,敬请等待哦!</h1>
        </div>


        <!-- 分页插件容器 -->
        <div class="pagination-container" v-if="code===200">
          <el-pagination
              big
              background

              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              :page-size="size"
              class="mt-4"
          />
        </div>
      </div>
    </div>





  </div>
</template>
<script>
export default {
  data() {
    return {
      teacher: {},
      courseList: [],
      code: 0,
      currentPage: 1,
      size: 6,
      total: 0,
    };
  },
  created() {
    const {id} = this.$route.params;
    console.log(id);
    this.getTeacherById(id);
    this.getCourseListByTeacherId(id)
  }, methods: {
    getTeacherById(id) {
      this.request.get(`/teacher/teacher/findTeacherById/${id}`)
          .then((res) => {
            if (res.code === 200) {
              this.teacher = res.teacherVo;
            }
          });
    },
    getCourseListByTeacherId(id){
      this.request.get(`course/course/findCourseListByTeacherId/${id}`)
          .then(res=>{
            if (res.code===200){
              this.code = res.code
              this.total = res.count
              this.courseList=res.courseVoList
            }
            this.code = res.code
          })
    },
    // 每页数
    handleSizeChange(val) {
      this.size = val
      this.currentPage = 1
      this.getArticleList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getArticleList()
    },
    openDetailPage(id) {
      this.$router.push(`/courseDetail/${id}`);
    }
  },
};
</script>



<style scoped>
.container {
  background-color: #fff;
  height: 500px;
  width: 1200px;
  margin-left: 200px;
  position: relative; /* 让容器相对定位 */
  display: flex;

}

.course-container{
  background-color: #FFFFFF;
  width: 1200px;
  height: 100%;
  margin-top: 10px;
  margin-left: 200px;
}

.course-details {
  display: flex;
}

.cover-image {
  height: 500px;
  width: 700px;
}

.course-info {
  margin-left: 20px; /* Adjust this value as needed */
}

.teacher-type {
  position: absolute;
  top: 10px; /* Adjust vertical position */
  right: 10px; /* Adjust horizontal position */
  background-color: #ce2c2c;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}



.chapter-container ul {
  list-style-type: none;
  padding: 0;
}

.chapter-container ul li {
  margin-top: 10px;
  cursor: pointer;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.chapter-container ul li:last-child {
  border-bottom: none;
}

.chapter-container ul li ul {
  margin-top: 5px;
  border-left: 2px solid #007bff; /* 添加边框样式 */
  padding-left: 10px; /* 调整边框与文本的距离 */
}

.chapter-container ul li ul li {
  margin-left: 0; /* 小节不再需要额外的左边距 */
}

.chapter-container ul li::before {
  content: "\2022";
  color: #007bff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
}



.chapter-container ul li ul li::before {
  content: "\25CF";
  color: #28a745;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
}



.course-cover {
  width: 100%;
  height: 200px; /* 设置课程封面高度 */
  object-fit: cover;
  border-radius: 8px 8px 0 0; /* 圆角设置 */
}

.course-card {
  width: calc(25% - 10px); /* 每行显示四个，设置宽度为四分之一，并考虑间距 */
  margin-right: 20px; /* 添加右边距，控制卡片之间的间距 */
  margin-bottom: 10px; /* 调整课程卡片底部的间距 */
  padding: 15px;
  margin-left: 60px;
  margin-top: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f9f9f9;
  display: inline-block; /* 设置为行内块级元素，实现横向排列 */
  vertical-align: top; /* 垂直对齐方式，顶部对齐 */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
  position: relative; /* 相对定位，用于定位课程价格 */
}

.course-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时添加阴影效果 */
  transform: translateY(-5px); /* 悬停时向上移动5像素 */
}

.course-card h3 {
  margin-top: 10px;
  margin-bottom: 5px; /* 调整课程名称距离卡片底部的距离 */
}

.course-card p {
  margin: 5px 0;
}
.pagination-container {
  display: flex;
  justify-content: center;
}
.pagination-container {
  display: flex;
  justify-content: center;
}



.courseTypeName{
  display: inline-block;
  padding: 5px 10px;
  background-color: orange;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
}


.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;

  background-color: #fff;
  height: 400px;
  width: 1200px;
}

.course-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;
  margin-top: 10px;
  background-color: #fff;
  height: 400px;
  margin-left: 10px;
}
</style>